<template>
	<view>
		<nav-bar title="订单详情" :leftBack="back.bind(this)"></nav-bar>
		<view :style="{'margin-top':navHeight+'px'}">
			<view class="top-box">
				<image class="bg" src="https://oss.jxhecong.com/v2/image/charging_top_bg@2x.png"></image>
				<view class="progress-info">
					<view class="wave">
						<circle-percent bg="#FFFFFF" :showPercent="deviceType==1?false:true" :percent="deviceType==1?'50':`${percent+''}`"></circle-percent>
						<view class="wave-circle"></view>
					</view>
					<view class="duration">已充时长：{{time}}</view>
				</view>
			</view>
			<view class="card box card-info">
				<view class="card-title">充电桩编号: {{orderInfo.shellId}}</view>
				<view class="card-title" style="margin-top:20rpx;" v-if="deviceType == 0">插座号：{{parseInt(orderInfo.code)+1}}号</view>
				<view class="card-title" style="margin-top:20rpx;" v-if="orderInfo.socketName">充电枪：{{orderInfo.socketName}}</view>
				<view class="pile-name" style="margin-top:18rpx;">{{orderInfo.chargingGroupName}}</view>
			</view>
			<view class="card box" style="margin-top:24rpx;">
				<view class="item-field">
					<text>订单编号</text>
					<text>{{orderInfo.orderNumber}}</text>
				</view>
				<view class="item-field">
					<text>下单用户</text>
					<text>{{orderInfo.memberMobile}}</text>
				</view>	
				<view class="item-field" v-if="orderInfo.billingType==0">
					<text>充电模式</text>
					<text>时长充电</text>
				</view>
				<view class="item-field" v-if="orderInfo.billingType==0">
					<text>充电时长</text>
					<text>{{orderInfo.totalChargingTime}}分钟</text>
				</view>
				<view class="item-field" v-if="orderInfo.billingType==1">
					<text>充电模式</text>
					<text>金额充电</text>
				</view>
				<view class="item-field" v-if="orderInfo.billingType==1">
					<text>充电金额</text>
					<text>{{orderInfo.chargeAmount}}元</text>
				</view>
				<view class="item-field" v-if="orderInfo.billingType==2">
					<text>充电模式</text>
					<text>充满自停</text>
				</view>
				<view class="item-field">
					<text>开始时间</text>
					<text>{{orderInfo.createDate}}</text>
				</view>
				<view class="item-field" v-if="this.deviceType == 1">
					<text>当前费用</text>
					<text>{{orderInfo.currentChargingAmount}}</text>
				</view>
			</view>
<!-- 			<view class="card box activity" style="margin-top:24rpx;">
				<view class="a-title">新用户活动</view>
				<view style="color:#303133;font-size:28rpx;">
					<view style="text-align: right;"><text style="color: #00C3A6;font-weight: bold;">1</text><text>/3</text>次</view>
					<view style="text-align: right;">每次<text style="color: #00C3A6;font-weight: bold;">0.10</text>元</view>
				</view>
			</view> -->
		</view>
		<view class="btn" @click="endCharge_click" v-if="orderInfo.status==1">结束充电</view>
		<view  class="btn" @click="showOrder" v-else-if="orderInfo.status==4">充电已结束，查看订单</view>
	</view>
</template>

<script>
	var globalData = getApp({
		allowDefault: true
	}).globalData
	import navBar from '../components/navBar.vue'
	import circlePercent from '@/components/circle-percent/circle-percent'
	import * as orderApi from '../../api/order/index.js'
	import * as chargeApi from '../../api/charge/index.js'
	var timer;
	export default{
		components:{navBar,circlePercent},
		data(){
			return{
				navHeight:0,
				orderNumber:'',
				deviceType:'',
				time:'00:00:00',
				orderInfo:{},
				currentSecond:0,
				timedata: null,
				percent:'',
				from:''
			}
		},
		onLoad(options) {
			this.orderNumber = options.orderNumber
			this.deviceType = options.deviceType
			console.log("## 充电成功 ## 订单编号 ## " + this.orderNumber + "## 设备类型 ## " + this.deviceType )
			this.from=options.from
			console.log('## 订单号 ## ' + this.orderNumber)
			this.navHeight = globalData.titleHeight;
			this.getOrderDetail();
			this.timedata = setInterval(()=>{
				this.getOrderDetail()
			},60000)
			if(this.from!='orderList'){
				// #ifdef APP-PLUS
				let currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
				currentWebview.setStyle({ popGesture: 'none' })
				// #endif
			}
		},
		methods:{
			back(){
				if(this.from!='orderList'){
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}
				else{
					uni.navigateBack({
						delta:1
					})
				}
			},
			getOrderDetail(){
				
				if(this.deviceType == 0){
					orderApi.getOrderDetail(this.orderNumber).then((res)=>{
						this.orderInfo=res.data
						this.currentSecond=this.orderInfo.chargingSeconds
						this.percent=parseFloat(this.orderInfo.chargingTime)/this.orderInfo.totalChargingTime*100
						this.percent=this.percent.toFixed(1)
						this.calculateTime()
					})
				}else{
					
					orderApi.getCarOrderDetail(this.orderNumber).then((res)=>{
						this.orderInfo=res.data
						this.currentSecond=this.orderInfo.chargingSeconds
						this.percent=parseFloat(this.orderInfo.chargingTime)/this.orderInfo.totalChargingTime*100
						this.percent=this.percent.toFixed(1)
						this.calculateTime()
					})
					
				}
				
				
			},
			calculateTime(){
				if(this.orderInfo.status !=1 ){
					this.currentSecond=this.orderInfo.chargingTime*60
					this.time = this.secondToDate(this.currentSecond)
				} else {
					timer=setInterval(()=>{
						this.time = this.secondToDate(this.currentSecond)
						this.currentSecond++
						this.percent=this.currentSecond/60.0/this.orderInfo.totalChargingTime*100
						this.percent=Number(this.percent.toFixed(1))
					},1000)
				}
			},
			secondToDate(result) {
				var h = Math.floor(result / 3600) < 10 ? '0'+Math.floor(result / 3600) : Math.floor(result / 3600);
				var m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
				var s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
				return result = h + ":" + m + ":" + s;
			},
			// 结束充电
			endCharge_click(){
				let _this=this
				uni.showModal({
					title:'提示',
					content:'确定要结束充电？',
					success(res) {
						if(res.confirm){
							_this.endCharge()
						}
					}
				})
			},
			endCharge(){
				if(this.deviceType == 0){
					chargeApi.endCharge(this.orderNumber).then((res)=>{
						console.log(res.data)
						if(res.code == 0){
							uni.redirectTo({
								url:'/pages/order/chargeDoneDetail?deviceType=0&orderNumber='+this.orderNumber
							})
						}
					})
				}else{
					chargeApi.endCarCharge(this.orderNumber).then((res)=>{
						console.log(res.data)
						if(res.code == 0){
							uni.redirectTo({
								url:'/pages/order/chargeDoneDetail?deviceType=1&orderNumber='+this.orderNumber
							})
						}
					})
				}
				
			},
			showOrder(){
				uni.navigateTo({
					url:'/pages/order/chargeDoneDetail?orderNumber='+this.orderNumber + "&deviceType=" + this.deviceType 
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.top-box{
		height:472rpx;
		position: relative;
	}
	.bg{
		height:472rpx;
		width:100%;
	}
	.progress-info{
		position: absolute;
		left:0rpx;
		top:0rpx;
		right:0rpx;
		height:472rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index:0;
	}
	.wave{
		position: relative;
		margin-top:-120rpx;
	}
	.wave-circle{
		position: absolute;
		top:13rpx;
		left: 13rpx;
		width:272rpx;
		height:272rpx;
		border-radius:50%;
		// border:solid 1rpx #FFFFFF;
		z-index:999999;
	}
	.duration{
		color:#FFFFFF;
		font-size:36rpx;
		text-align: center;
		margin-top:0rpx;
	}
	
	.card{
		background: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
		border-radius: 9px;
		margin-left:30rpx;
		margin-right:30rpx;
		overflow: hidden;
	}
	.box{
		padding:30rpx;
	}
	.card-info{
		position: relative;
		margin-top:-80rpx;
	}
	.card-title{
		color:#303133;
		font-size:32rpx;
	}
	.pile-name{
		color:#909399;
		font-size:28rpx;
	}
	.item-field{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom:20rpx;
	}
	.item-field:last-child{
		margin-bottom:0rpx;
	}
	.item-field>text:first-child{
		color:#909399;
		font-size:28rpx;
	}
	.item-field>text:last-child{
		color:#303133;
		font-size:28rpx;
	}
	.a-title{
		color:#909399;
		font-size:28rpx;
	}
	.activity{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.btn{
		position: fixed;
		left:30rpx;
		right:30rpx;
		bottom:30rpx;
		background: #6ABF6C;
		box-shadow: 0px 1px 2px 0px rgba(8, 139, 120, 0.3);
		border-radius: 9px;
		height:102rpx;
		line-height:102rpx;
		text-align: center;
		color: #FFFFFF;
		font-size:36rpx;
		font-weight: bold;
	}
</style>
